// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, TouchableOpacity, Image } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/Ionicons';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Style from './style.js';

// 引入公用组件
import { } from '../../components/index.js'

// 引入专用组件
import { press } from '../../util/utils'
/* <NavBar
          type="default"
          back={() => { }}
          extra="操作"
          title="首页"
        /> */

class NavBar extends Component {

	constructor(props) {
		super(props)
		this.state = {
			theme: {
				color: '#000',
				extra: '#eee',
				backgroundColor: '#fff',
				borderColor: '#f4f4f4'
			},
			transparent: {
				color: '#fff',
				extra: '#eee',
				backgroundColor: 'transparent',
				borderColor: 'transparent'
			},
			dark: {
				color: '#fff',
				extra: '#eee',
				backgroundColor: '#000',
				borderColor: '#f4f4f4'

			},
			bright: {
				color: '#000',
				extra: '#eee',
				backgroundColor: '#fff',
				borderColor: '#f4f4f4'

			},
		}
	}

	componentWillMount() {
		this.getTheme()
	}

	getBnckType() {
		const { backType } = this.props
		// switch (backType) {
		// 	case 'dark':
		// 		// return require('../../static/images/icon-bank.png');
		// 	case 'bright':
		// 		// return require('../../static/images/icon-bank-white.png');
		// 	default:
		// 		// return require('../../static/images/icon-bank.png');
		// }
	}

	getBack() {
		const { back } = this.props
		const { theme } = this.state;
		if (back) {
			return (
				<TouchableOpacity
					onPress={() => { Actions.pop() }}
					style={[Style.icon, {  }]}
				>
					<Image resizeMode='cover' style={{ width: 24, height: 24 }} source={require('../../static/images/icon-back.png')} />
				</TouchableOpacity>
			)
		} else {
			return (
				<View style={[Style.icon, { marginRight: 10 }]}></View>
			)
		}
	}

	getExtra() {
		const { extra, extraStyle, extraOnPress } = this.props
		const { theme } = this.state;

		if (extra) {
			if (extra.type.displayName == "Image") {
				return (
					<TouchableOpacity
						onPress={() => { extraOnPress ? extraOnPress() : null }}
						style={[Style.icon, {  }]}>
						{extra}
					</TouchableOpacity>
				)
			}
			return (
				<TouchableOpacity
					onPress={() => { extraOnPress ? extraOnPress() : null }}
					style={[Style.icon, {  }]}>
					<Text allowFontScaling={false} style={[{ fontSize: 14, color: theme.color, lineHeight: 44, textAlign: 'right' }, extraStyle]}>{extra}</Text>
				</TouchableOpacity>
			)
		} else {
			return (
				<View style={[Style.icon, {}]}></View>
			)
		}
	}

	getTheme() {
		const { type } = this.props
		switch (type) {
			case 'dark':
				this.setState({
					theme: this.state.dark
				})
				return
			case 'bright':
				this.setState({
					theme: this.state.bright
				})
				return
			case 'transparent':
				this.setState({
					theme: this.state.transparent
				})
				return
			default:
				return
		}
	}

	render() {
		const { theme } = this.state;
		return (
			<View style={[Style.container, { backgroundColor: theme.backgroundColor, borderBottomColor: theme.borderColor }, this.props.style]}>
				{this.getBack()}
				<View style={Style.headerTitle}>
					<Text allowFontScaling={false} style={[Style.headerTitleText, { color: theme.color }, this.props.titleStyle]}>{this.props.title}</Text>
				</View>
				{this.getExtra()}
			</View>
		)
	}
}

export default pureRender(NavBar)
